<template>
  <nav class="header-area">
    <div class='site-logo'>
      <Logo v-if='!websiteConfig.logo'/>
      <a :href='websiteConfig.websiteUrl' class='home' v-else>
        <img :src='websiteConfig.logo' :alt='websiteConfig.name'>
      </a>
    </div>
    <div class='site-menu'>
      <input type="checkbox" id="menu-open" class="hidden">
      <label for="menu-open" class="iconfont out menu-open icon-daohang-fill" role="button"></label>
      <nav class="menu-out">
        <Navigation />
      </nav>
    </div>
    <div class='site-icon'>
      <Controls/>
      <a class="iconfont out icon-mulu post-menu tips" href="#app" title="返回首行">
        <div class="site-title">热爱你来过的每度温暖</div>
      </a>
      <div class="go-top" title="回到顶部" @click.stop.prevent="handleBackToTop">
        <i class="iconfont btn none"></i>
        <i class="percent">{{ progress }}</i>
      </div>
      <input type="checkbox" id="menu-toggle" class="hidden">
      <label for="menu-toggle" class="widget" title="打开全站动态面板" role="button">
        <i class="left"></i>
        <i class="widget center"></i>
        <i class="widget right"></i>
      </label>
      <MenuWidget />
    </div>
    <div class="nav-bg blur-saturate"></div>
  </nav>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, onUnmounted, ref } from 'vue'
import { Logo, Navigation, Controls } from '../index'
import MenuWidget from '@/components/MenuWidget/MenuWidget.vue'
import { useNavigatorStore } from '@/stores/navigator'
import { useAppStore } from '@/stores/app'

export default defineComponent({
  name: 'Header',
  components: {
    MenuWidget,
    Logo,
    Navigation,
    Controls
  },
  props: {
    msg: String
  },
  setup(){
    const appStore = useAppStore()
    const progress = ref(0)
    onMounted(()=>{
      document.addEventListener('scroll', scrollProgress)
    })
    onUnmounted(()=>{
      document.removeEventListener('scroll', scrollProgress)
    })
    const scrollProgress = () => {
      setTimeout(() => {
        progress.value = Number(
          ((window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight)) * 100).toFixed(0)
        )
      }, 0)
    }
    const navigatorStore = useNavigatorStore()
    const handleBackToTop = () => {
      navigatorStore.setOpenNavigator(false)
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
    return{
      progress,
      handleBackToTop,
      websiteConfig: computed(() => {
        return appStore.websiteConfig
      })
    }
  }
})
</script>

<style lang="scss" scoped>
:root body:where(.theme-dark) .menu-out{
  --s-bg: hsl(214deg 60% 30% / 55%);
}
.site-logo a.home{
  margin: 0 auto;
  display: flex;
}
a.home img{
  display: block;
  height: 34px;
}
@media (max-width: 641px) {
  .header-area{
    --nav-height: 2.75rem;
  }
}
.nav-fixed .site-header{
  color: var(--nav-font-color) !important;
}
.header-area {
  .site-header {
    @apply relative flex my-0 mx-auto h-full;
  }
}
</style>
